<template>
  <ul v-if="realCircle" :style="{width:ulWidth}">
    <li class="selectLi" v-for="(value,index) in array" @click="selectButtonOne(index)" v-bind:class="{hasBorder:index!=selectIndex}" :style="{background:'url('+imgUrl+(index==selectIndex?receiveImgUrl1:'')+') no-repeat center center/100% 100%',}"></li>
  </ul>
  <ul v-else :style="{width:ulWidth}">
    <li class="selectLi" v-for="(value,index) in array" @click="selectButtonTwo(index)" v-bind:class="{hasBorder:!judge[index]}" :style="{background:'url('+imgUrl+(judge[index]?receiveImgUrl1:'')+') no-repeat center center/100% 100%',}"></li>
  </ul>
</template>
<style>
  .selectLi{
    width:1rem;
    height:1rem;
    display:inline-block;
    border-radius:1rem;
    margin-right:1rem;
    position:relative;
  }
  .hasBorder:before {
    content: '';
    position: absolute;
    border: 1px solid grey;
    top:0rem;
    left: 0rem;
    width: 0.9rem;
    height: 0.9rem;

    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 1rem;
  }
</style>
<script>
  export default{
    name:"selectButton",
    data(){
      return{
        selectIndex:"99",//当前所点击区域索引值,起始值设为99，是为了使初始布尔值不为false
        imgUrl:serverUrl,//服务器地址
        judge:[]
      }
    },
    ready(){
    },
    props:{
      realCircle:{//是否是实心圆,值为true，则为单选，为false则为多选
        default:true
      },
      receiveImgUrl1:{
        default:"/static/images/circle_current.png"
      },
      receiveImgUrl2:{
        default:"/static/images/anew_location.png"
      },
      array:{//使用此组件要传入的数组（确定要有多少个选项）
        type:Array,
        default:function(){
            return [0,1,2,3,4];
        }
      },
      ulWidth:{//该组件所占页面默认宽度
        default:"6rem"
      }
    },
    methods:{
      selectButtonOne(index){
        this.selectIndex=index;
      },
      selectButtonTwo(index){
        this.$set(this.judge, index, !this.judge[index]);
      }
    }
  }
</script>
